<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>直播页面</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>

  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.19/skins/default/aliplayer-min.css" />
  <script charset="utf-8" type="text/javascript"
    src="https://g.alicdn.com/de/prismplayer/2.9.19/aliplayer-min.js"></script>
  <script charset="utf-8" type="text/javascript"
    src="https://g.alicdn.com/de/prismplayer/2.9.19/aliplayer-h5-min.js"></script>
</head>

<body>
  <div id="J_prismPlayer">
  </div>
  <div id='app'>

    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="houseId" header-align="center" align="center" label="id">
      </el-table-column>
      <el-table-column prop="housePrice" header-align="center" align="center" label="金额（/平方）">
      </el-table-column>
      <el-table-column prop="houseName" header-align="center" align="center" label="房屋名">
      </el-table-column>
      <el-table-column prop="houseAddress" header-align="center" align="center" label="地址">
      </el-table-column>
      <el-table-column prop="houseArea" header-align="center" align="center" label="面积（m2)-">
      </el-table-column>
      <!-- <el-table-column prop="status" header-align="center" align="center" label="状态(0.已卖 1.未卖)">
            </el-table-column> -->
      <el-table-column prop="houseDesc" header-align="center" align="center" label="户型(如1室1厅)">
      </el-table-column>
      <el-table-column prop="defaultImg" header-align="center" align="center" label="默认图片">
        <template slot-scope="scope">
          <img :src="scope.row.defaultImg" width="100px" height="100px" alt="">
        </template>
      </el-table-column>
      <!-- <el-table-column prop="userId" header-align="center" align="center" label="发布经纪人">
            </el-table-column> -->
      <el-table-column prop="flag" header-align="center" align="center" label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.flag==1">新房</span>
          <span v-if="scope.row.flag==2">二手房</span>
        </template>

      </el-table-column>
      <el-table-column prop="createTime" header-align="center" align="center" label="创建时间">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goshop(scope.row.houseId)">立即购买</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[3, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>

  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          url: "http://localhost:8888/api",
          dataForm: {
            key: ''
          },
          downUrl: '',
          dataList: [],
          pageIndex: 1,
          pageSize: 3,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false
        }

      },
      //方法集合
      methods: {
        goshop (id) {
          console.log(id);
          alert("购买成功", id)
        },
        // 获取数据列表
        getDataList () {
          axios({
            url: `${this.url}/live/livestream/info/${localStorage.getItem("liveId")}`,
            method: 'get',
            params: ({
              'liveId': localStorage.getItem("liveId")
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              console.log(data)
              this.dataList = data.liveStream.newHouseVos
              this.downUrl = data.liveStream.downUrl
              localStorage.setItem("downUrl", this.downUrl)
              console.log(localStorage.getItem("downUrl"))
            } else {
              this.dataList = []
            }
            this.dataListLoading = false
          })
        },
        // 每页数
        sizeChangeHandle (val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
        },
        // 当前页
        currentChangeHandle (val) {
          this.pageIndex = val
          this.getDataList()
        },
        // 多选
        selectionChangeHandle (val) {
          this.dataListSelections = val
        },

      },
      created () {

        localStorage.getItem("liveId")
        this.getDataList()
      },
    })
    var player = new Aliplayer({
      id: 'J_prismPlayer',
      source: localStorage.getItem("downUrl"),
      isLive: true
    },
      function (player) {
        // console.log(localStorage.getItem("downUrl"));
      }
    );
        // console.log(localStorage.getItem("downUrl"));
  </script>



</body>

</html>